html, body {
    height: 100%;
    font-family: 'Questrial', sans-serif;
}

h1 {
    font-size: 5em;
    text-align: center;
}

h2 {
    font-size: 2.3em;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
}

p {
    font-family: 'Muli', sans-serif;
    color: rgb(25, 25, 25); /*Darken standard bootstrap paragraph color*/
}

/*#main-wrapper {*/
    /*height: 100%;*/
    /*position: relative; !*Redundant because of slideout-panel*!*/
    /*z-index: 2; !*Redundant because of slideout-panel*!*/

    /*overflow-y: scroll; !* has to be scroll, not auto *!*/
    /*-webkit-overflow-scrolling: touch;*/

    /*!*overflow-x: hidden;*!*/

    /*!*overflow: auto;*!*/

    /*!*!* Make sure the inner div is not larger than the container*!*/
     /*!** so that we have room to scroll.*!*/
     /*!**!*!*/
    /*!*max-height: 100%;*!*/

    /*!*!* Pick an arbitrary margin/padding that should be bigger*!*/
     /*!** than the max width of all the scroll bars across*!*/
     /*!** the devices you are targeting. Hack to definitely hide scrollbar*!*/
     /*!** padding = -margin*!*/
     /*!**!*!*/
    /*!*margin-right: -100px;*!*/
    /*!*padding-right: 100px;*!*/
/*}*/

#sky {
    /*position: fixed;*/
    position: absolute;
    width: 100%;
    height: 68%;
    background: linear-gradient(#ccf1ff, white);
    text-align: center;
    top:0;
}

#water {
    /*position: fixed;*/
    position: absolute;
    width: 100%;
    height: 32%;
    background: rgb(169, 215, 233);
    margin: 0;
    bottom: 0;
}

.container-fluid {
    /*background: blue;*/
    /*padding-top: 2em; Enable if header is fixed*/
    padding-right: 2%;
    padding-left: 2%;
}

#hero-section {
    min-height: 100%; /*TODO Find a better solution, javascript is maybe the only option*/
    text-align: center;
}

#hero-section .row {
    margin: 0 auto;
}

#LogoAndBird {
    position: relative;
    color: transparent; /*prevents the alt text from appearing for a split second before the images load*/
    z-index: 1;
    margin: 3.5em auto 0;
    padding: 0 2em ;
}

img#logo {
    display: inline;
    width: 43em;
    height: auto;
}

img#birdy {
    z-index: 20;
    display: inline;
    right: 0;
    width: auto;
    height: 11em;
}

.arrow-wrap {
    position:absolute;
    z-index:1;
    left:50%;
    margin-top:-110px;
    margin-left:-5em;
    /*background:#111;*/
    text-shadow: 0 1px 2px rgb(150, 150, 150);
    width:10em;
    height:10em;
    padding: 1.4em 1em;
    border-radius:50%;
    font-size:0.5em;
    display:block;
    text-align: center;
}

.arrow {
    font-size: 7em;
    color: white;
}

.arrow:after {
    -webkit-transform:rotate(360deg)
}

@-webkit-keyframes arrows {
    0% { top:0; }
    10% { top:12%; }
    20% { top:0; }
    30% { top:12%; }
    40% { top:-12%; }
    50% { top:12%; }
    60% { top:0; }
    70% { top:12%; }
    80% { top:-12%; }
    90% { top:12%; }
    100% { top:0; }
}

.arrow-wrap .arrow {
    -webkit-animation: arrows 2.8s 0.4s;
    -webkit-animation-delay: 3s;
}

@media (max-width: 992px) {
    #logo {}
}

/*****************
Animated character
*****************/

#svgContainer {
    width: 80%;
    height: 80%;
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

/**********
 BACKGROUND
 **********/

#left-mountain-lighthouse {
    /*z-index: 0;*/

    /*position: fixed;*/
    position: absolute;
    bottom: 3em;
    left: 0;
    padding-right: 60%;

    width: auto;
    height: 51%;
}

#right-mountain {
    /*z-index: 0;*/

    /*position: fixed;*/
    position: absolute;
    bottom: -1em;
    right: -1em;
    width: auto;
    height: 60%;
}

/************
MEDIA QUERIES
*************/
@media (max-width: 1440px) {
    #LogoAndBird {
        margin-top: 0.2em;
    }
}


@media (max-width: 992px) {

    #LogoAndBird {
        margin-top: 2em;
    }

    img#birdy {
        display:none;
    }


    #right-mountain {
        height: 32%;
        bottom:0;
        right:0;
    }

    #left-mountain-lighthouse {
        bottom:3em;
        height: 28%;
        padding:0;
    }

    #sky {
        height: 80%;
    }

    #water {
        height: 20%;
    }



}

@media (max-width: 767px) {

    #LogoAndBird {
        margin-top: -1em;
    }

    #logo {
        max-width: 27em;
    }

    #right-mountain {
        height: 35%;
        bottom: 0;
        right:0;
    }

    #left-mountain-lighthouse {
        bottom: 0.5em;
        height: 33%;
        padding: 0;
    }

    #sky {
        height: 84%;
    }
    #water {
        height: 21%;
    }

    .arrow-wrap {
        margin-top: -50px;
        width: 7em;
        height: 7em;
        padding: 1.25em 0;

    }
    .arrow {
        font-size: 5em;
    }
}

@media (max-width: 565px) {

    #LogoAndBird {
        margin-top: 1em;
    }

    #logo {
        max-width: 100%;
    }
    #water {
        height: 16%;
    }
    #right-mountain {
        height: 25%;
        bottom: 0;
        right:0;
    }
    #left-mountain-lighthouse {
        bottom: 1.5em;
        height: 23%;
        padding: 0;
    }
}